<template>
	<!-- 发现新版本弹窗组件 -->
	<view v-if="visible" class="new-version-modal-overlay">
		<!-- 蜘蛛网视觉效果容器 -->
		<view class="spider-web-container">
			<!-- 弹窗主体 -->
			<view class="new-version-modal">
				<!-- 弹窗头部 -->
				<view class="modal-header">
					<text class="modal-title">发现新版本</text>
				</view>
				
				<!-- 版本信息区域 -->
		<view class="version-info">
			<view class="version-item">
				<text class="version-label">当前版本：</text>
				<text class="version-value">{{ currentVersion || '1.0.0' }}</text>
			</view>
			<view class="version-item">
				<text class="version-label">最新版本：</text>
				<text class="version-value new-version">{{ latestVersion || '1.1.0' }}</text>
			</view>
			<view class="version-item">
				<text class="version-label">上线时间：</text>
				<text class="version-value">{{ versionCreatedAt.slice(0, 10) }}</text>
			</view>
		</view>
				
				<!-- 更新描述区域 -->
				<view class="update-description">
					<text class="description-title">更新内容：</text>
					<u-read-more>
		<rich-text class="description-content" :nodes="updateDescription"></rich-text>
	</u-read-more>
					<!-- <text class="description-content">{{ updateDescription || '修复已知问题，优化用户体验' }}</text> -->
				</view>
				
				<!-- 按钮区域 -->
				<view class="action-buttons">
					<u-button class="cancel-button" @click="handleCancel">取消</u-button>
					<u-button class="update-button" @click="handleUpdate">前往更新</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 定义组件的属性（props）
	const props = defineProps({
		/**
		 * 控制弹窗显示与隐藏的布尔值
		 * @type {boolean}
		 */
		visible: {
			type: Boolean,
			required: true,
			default: false
		},
		/**
		 * 当前应用版本号
		 * @type {string}
		 */
		currentVersion: {
			type: String,
			required: false,
			default: '1.0.0'
		},
		/**
		 * 最新应用版本号
		 * @type {string}
		 */
		latestVersion: {
			type: String,
			required: false,
			default: '1.1.0'
		},
		/**
		 * 新版本创建时间
		 * @type {string}
		 */
		versionCreatedAt: {
			type: String,
			required: false,
			default: new Date().toLocaleString('zh-CN')
		},
		/**
		 * 版本更新描述内容
		 * @type {string}
		 */
		updateDescription: {
			type: String,
			required: false,
			default: '修复已知问题，优化用户体验'
		}
	})
	
	// 定义组件的事件（emits）
	const emit = defineEmits(['close'])


	/**
	 * 处理前往更新按钮点击事件
	 * 通过路由导航至版本页面
	 */
	const handleUpdate = () => {
		// 路由导航到版本页面
		uni.navigateTo({
			url: '/pages/version/version'
		})
		// 导航后关闭弹窗
		emit('close')
	}
	
	/**
	 * 处理取消按钮点击事件
	 * 触发关闭弹窗事件
	 */
	const handleCancel = () => {
		// 触发关闭事件
		emit('close')
	}
</script>

<style scoped lang="scss">
	/* 弹窗遮罩层 */
	.new-version-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		/* 添加背景渐显效果 */
		animation: fadeIn 0.3s ease-out;
	}
	
	/* 淡出动画 */
	.new-version-modal-overlay.fade-out {
		animation: fadeOut 0.3s ease-in;
	}
	
	/* 淡入动画 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	
	/* 淡出动画 */
	@keyframes fadeOut {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}

	/* 蜘蛛网视觉效果容器 */
	.spider-web-container {
		position: relative;
		width: 90%;
		max-width: 600rpx;
		/* 为蜘蛛网效果添加足够的空间 */
		padding: 60rpx;
		/* 容器动画 */
		animation: scaleIn 0.4s ease-out;
	}
	
	/* 缩放进入动画 */
	@keyframes scaleIn {
		from {
			opacity: 0;
			transform: scale(0.8);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}
	
	/* 缩放退出动画 */
	@keyframes scaleOut {
		from {
			opacity: 1;
			transform: scale(1);
		}
		to {
			opacity: 0;
			transform: scale(0.8);
		}
	}
	
	/* 蜘蛛网视觉效果 - 径向线条 */
	.spider-web-container::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 200%;
		height: 200%;
		transform: translate(-50%, -50%);
		background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, rgba(0,255,0,0.1) 50%, transparent 70%);
		border-radius: 50%;
		z-index: 5;
		/* 蜘蛛网脉冲动画 */
		animation: webPulse 4s ease-in-out infinite;
	}
	
	/* 蜘蛛网线条 - 创建交叉线 */
	.spider-web-container::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: 
			linear-gradient(45deg, transparent 45%, rgba(255,215,0,0.2) 45%, rgba(255,215,0,0.2) 55%, transparent 55%),
			linear-gradient(135deg, transparent 45%, rgba(0,255,0,0.2) 45%, rgba(0,255,0,0.2) 55%, transparent 55%),
			linear-gradient(90deg, transparent 45%, rgba(255,215,0,0.15) 45%, rgba(255,215,0,0.15) 55%, transparent 55%),
			linear-gradient(0deg, transparent 45%, rgba(0,255,0,0.15) 45%, rgba(0,255,0,0.15) 55%, transparent 55%);
		z-index: 5;
		/* 蜘蛛网线条流动效果 */
		animation: webFlow 8s ease-in-out infinite alternate;
	}
	
	/* 蜘蛛网脉冲动画 */
	@keyframes webPulse {
		0%, 100% {
			opacity: 0.7;
			scale: 1;
		}
		50% {
			opacity: 1;
			scale: 1.05;
		}
	}
	
	/* 蜘蛛网线条流动效果 */
	@keyframes webFlow {
		0% {
			background-position: 0% 0%;
		}
		100% {
			background-position: 100% 100%;
		}
	}
	
	/* 蜘蛛网线条 - 创建交叉线 */
	.spider-web-container::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: 
			linear-gradient(45deg, transparent 45%, rgba(255,215,0,0.2) 45%, rgba(255,215,0,0.2) 55%, transparent 55%),
			linear-gradient(135deg, transparent 45%, rgba(0,255,0,0.2) 45%, rgba(0,255,0,0.2) 55%, transparent 55%),
			linear-gradient(90deg, transparent 45%, rgba(255,215,0,0.15) 45%, rgba(255,215,0,0.15) 55%, transparent 55%),
			linear-gradient(0deg, transparent 45%, rgba(0,255,0,0.15) 45%, rgba(0,255,0,0.15) 55%, transparent 55%);
		z-index: 5;
	}

	/* 弹窗主体 */
	.new-version-modal {
		background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
		/* 添加黄绿渐变边框效果 */
		border: 2rpx solid transparent;
		background-clip: padding-box;
		box-shadow: 0 0 0 2rpx transparent;
		/* 内容淡入动画 */
		animation: contentFadeIn 0.6s ease-out;
		/* 最大宽度限制 */
		max-width: 800rpx;
		/* 最小宽度保证可读性 */
		min-width: 500rpx;
	}
	
	/* 弹窗边框效果 - 使用伪元素创建渐变边框 */
	.new-version-modal::before {
		content: '';
		position: absolute;
		top: -3rpx;
		left: -3rpx;
		right: -3rpx;
		bottom: -3rpx;
		background: linear-gradient(45deg, #ffd700, #00ff00, #ffd700);
		border-radius: 22rpx;
		z-index: -1;
		animation: borderRotate 6s linear infinite;
	}

	/* 弹窗头部 */
	.modal-header {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.modal-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		/* 添加标题文字渐变效果 */
		background: linear-gradient(45deg, #ffd700, #00cc00);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		display: inline-block;
		/* 添加文字阴影增强可见性 */
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
	}

	/* 版本信息区域 */
	.version-info {
		margin-bottom: 30rpx;
	}

	.version-item {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		/* 版本信息淡入动画 */
		animation: itemFadeIn 0.8s ease-out;
	}
	
	/* 具体信息元素动画延迟 */
	.version-item:nth-child(1) {
		animation-delay: 0.2s;
	}
	
	.version-item:nth-child(2) {
		animation-delay: 0.4s;
	}
	
	.version-item:nth-child(3) {
		animation-delay: 0.6s;
	}

	.version-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
		/* 确保标签宽度一致，提升对齐效果 */
		min-width: 120rpx;
		display: inline-block;
	}

	.version-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		/* 增加对比度 */
		text-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.05);
	}

	.version-value.new-version {
		/* 修改为更柔和且对比度更好的绿色 */
		color: #22c55e; /* 更清晰的绿色 */
		font-weight: bold;
		/* 添加文字阴影增加辨识度 */
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
	}

	/* 更新描述区域 */
	.update-description {
		background-color: #f9f9f9;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		min-height: 100rpx;
		/* 描述区域动画 */
		animation: itemFadeIn 1s ease-out;
		animation-delay: 0.6s;
	}

	.description-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.description-content {
		font-size: 26rpx;
		color: #666;
		line-height: 40rpx;
		white-space: pre-line;
		/* 增加对比度和可读性 */
		text-shadow: 0 0.5rpx 1rpx rgba(0, 0, 0, 0.05);
		/* 确保换行正常显示 */
		word-break: break-word;
	}

	/* 按钮区域 */
	.action-buttons {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
		max-width: 500rpx;
		margin: 0 auto;
	}

	.cancel-button {
		/* 灰色背景，与主操作按钮区分 */
		background: linear-gradient(135deg, #f0f0f0, #d0d0d0);
		color: #666;
		font-size: 30rpx;
		font-weight: bold;
		padding: 20rpx 60rpx;
		border: none;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		/* 确保按钮宽度与更新按钮一致 */
		min-width: 200rpx;
		/* 居中文本 */
		text-align: center;
	}

	/* 取消按钮悬停效果 */
	.cancel-button:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.15);
		background: linear-gradient(135deg, #e0e0e0, #c0c0c0);
	}

	/* 取消按钮点击涟漪效果 */
	.cancel-button::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 5px;
		height: 5px;
		background: rgba(255, 255, 255, 0.5);
		opacity: 0;
		border-radius: 100%;
		transform: scale(1, 1) translate(-50%, -50%);
		transform-origin: 50% 50%;
	}

	/* 取消按钮点击涟漪效果 */
	.cancel-button:active::after {
		animation: ripple 0.6s ease-out;
	}

	.update-button {
		/* 黄绿渐变背景，调整为更柔和的绿色 */
		background: linear-gradient(135deg, #ffd700, #22c55e);
		color: #333;
		font-size: 30rpx;
		font-weight: bold;
		padding: 20rpx 60rpx;
		border: none;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 10rpx rgba(255, 215, 0, 0.3);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		/* 确保按钮宽度合适 */
		min-width: 200rpx;
		/* 居中文本 */
		text-align: center;
	}
	
	/* 按钮悬停效果 */
	.update-button:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 15rpx rgba(255, 215, 0, 0.4);
	}
	
	/* 按钮动画效果 - 涟漪效果 */
	.update-button::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 5px;
		height: 5px;
		background: rgba(255, 255, 255, 0.5);
		opacity: 0;
		border-radius: 100%;
		transform: scale(1, 1) translate(-50%, -50%);
		transform-origin: 50% 50%;
	}
	
	/* 按钮点击涟漪效果 */
	.update-button:active::after {
		animation: ripple 0.6s ease-out;
	}
	
	/* 涟漪扩散动画 */
	@keyframes ripple {
		0% {
			transform: scale(0, 0);
			opacity: 0.5;
		}
		100% {
			transform: scale(100, 100);
			opacity: 0;
		}
	}
	
	/* 内容淡入动画 */
	@keyframes contentFadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	
	/* 项目淡入动画 */
	@keyframes itemFadeIn {
		from {
			opacity: 0;
			transform: translateY(10rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	/* 边框旋转动画 */
	@keyframes borderRotate {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.update-button:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 5rpx rgba(255, 215, 0, 0.4);
	}
	
	/* 取消按钮点击状态 */
	.cancel-button:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
	}
	

</style>
